<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>伪元素选择器</title>
		<style>
			@font-face {
			  font-family: 'iconfont';
			  src: url('font/iconfont.ttf?t=1680263401838') format('truetype');
			}
			.iconfont {
			  font-family: "iconfont" !important;
			  font-size: 16px;
			  font-style: normal;
			  -webkit-font-smoothing: antialiased;
			  -moz-osx-font-smoothing: grayscale;
			}
		/* 	
			div::before {
				这个content无论有没有内容都必须要写 
				content: "我跟着";
			}
			div::after {
				content: "学习Python Web开发";
			} */
			i::before {
				content: "\e657";
				font-size: 12px;
			}
			div {
				width: 257px;
				height: 80px;
				background-color: #39364d;
				color: white;
				border-top-left-radius: 10px;
				line-height: 80px;
			}
			div span:first-child {
				font-size: 14px;
			}
			div span:nth-child(2){
				font-size: 12px;
			}
			
		</style>
	</head>
	<body>
		<div>
			大周老师
		</div>
		<!-- <i class="iconfont">&#xe657;</i> -->
		<i class="iconfont"></i>
		
		<div>
			<span>前端开发：</span>
			<span>HTML5 / Vue.js / Node.js</span>
			<i class="iconfont"></i>
		</div>
		
	</body>
</html>